<template>
<div>
<!--  <van-field v-model="temp.address" placeholder="请输入地址来直接查找相关位置" clearable />
  <van-button class="confirm" @click="searchSite">定位</van-button>-->

  <baidu-map class="bm-view" style="height: 100vh;" @ready="handler" :center="center" :zoom="15" :scroll-wheel-zoom="true" @click="getPoint" >
    <bm-view class="map" />
<!--    <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location" style="width:0;height:100%;overflow: hidden;" />-->
  </baidu-map>

</div>
</template>

<script>
export default {
  name: 'MapIndex',
  components: {},
  props: {},
  data () {
    return {
      addressList: [],
      center: {
        lng: 118.767413,
        lat: 32.041544
      },
      location: '南京市',
      keyword: '' // 地图搜索关键字
    }
  },
  computed: {},
  watch: {},
  created () {

  },
  mounted () {
  },
  methods: {
    handler ({ BMap, map }) {
      this.getRequest('/fro/shop/list').then(({ data }) => {
        console.log(data)
        this.addressList = data.data
        const date = new Date()
        this.addressList.map(item => {
          var point = new BMap.Point(item.longitude, item.latitude)
          map.centerAndZoom(point, 13)
          var marker = new BMap.Marker(point) // 创建标注
          map.addOverlay(marker) // 将标注添加到地图中
          var content = '<table>'
          content = content + `<tr><td>${item.name}</td></tr>`
          content = content + `<tr><td> 地点：${item.address}</td></tr>`
          content = content + `<tr><td> 时间：${date}</td></tr>`
          content += '</table>'
          const infoWindow = new BMap.InfoWindow(content)
          /* 给标记点绑定单击事件 */
          marker.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point)
          })
          var circle = new BMap.Circle(point, 6, { strokeColor: 'Red', strokeWeight: 6, strokeOpacity: 1, Color: 'Red', fillColor: '#f03' })
          map.addOverlay(circle)
        })

        map.enableScrollWheelZoom(true)
        const scaleCtrl = new BMap.ScaleControl() // 添加比例尺控件
        map.addControl(scaleCtrl)
        const zoomCtrl = new BMap.ZoomControl() // 添加比例尺控件
        map.addControl(zoomCtrl)
        // s3
        map.addControl(new BMap.ScaleControl()) // 添加比例尺
        map.addControl(
          new BMap.MapTypeControl()
        )
        // 添加带有定位的导航控件
        var navigationControl = new BMap.NavigationControl()
        map.addControl(navigationControl)
        // 添加定位控件
        var geolocationControl = new BMap.GeolocationControl()
        geolocationControl.addEventListener('locationSuccess', function (e) {
          // 定位成功事件
          var address = ''
          address += e.addressComponent.province
          address += e.addressComponent.city
          address += e.addressComponent.district
          address += e.addressComponent.street
          address += e.addressComponent.streetNumber
          alert('当前定位地址为：' + address)
        })
        geolocationControl.addEventListener('locationError', function (e) {
          // 定位失败事件
          alert(e.message)
        })
        map.addControl(geolocationControl)
      })
      // map.enableScrollWheelZoom(true)
    },
    getPoint (e) { // 地图点击事件 =》获取经纬度
      this.temp.lng = e.point.lng
      this.temp.lat = e.point.lat
      /* global BMap */
      const geocoder = new BMap.Geocoder() // 创建地址解析器的实例
      geocoder.getLocation(e.point, rs => { // 当前位置定位
        const province = rs.addressComponents.province // 省
        const city = rs.addressComponents.city // 城市
        const district = rs.addressComponents.district // 区县
        const street = rs.addressComponents.street // 街道
        const streetNumber = rs.addressComponents.streetNumber// 门牌号
        this.temp.address = province + city + district + street + streetNumber // 组装成地址
        this.temp.address = rs.address

        console.log(rs.surroundingPois) // 附近的POI点(array) POI：兴趣点 可以是一栋房子、一个商铺、一个邮筒、一个公交站
        console.log(rs.business) // 商圈字段，代表此点所属的商圈(string)
      })
    },

    searchSite () { // 定位
      this.keyword = this.temp.address
      console.log(this.keyword)
    }
  }
}
</script>

<style scoped lang="scss">

.map {
  width: 100%;
  height:100%;
}

</style>
